<template>
  <div class="tag">
    <div class="tag-title">{{ props.title }}</div>
    <div v-for="(item, index) in props.list" :key="index" class="tag-item">
      <div class="tag-item-name" :class="{ active: item.code === selectValue }" @click="handleClick(item)">{{ item.desc }}</div>
    </div>
  </div>
</template>

<script setup>
  const emit = defineEmits(['update:modelValue', 'change'])
  const props = defineProps({
    title: { type: String, default: '' },
    list: { type: Array, default: null },
    modelValue: { type: String, default: '' },
    defaultValue: { type: String, default: '' }
  })

  // 选中
  const selectValue = ref()

  // 点击分类
  const handleClick = (item) => {
    if (selectValue.value !== item.code) {
      selectValue.value = item.code
      emit('update:modelValue', item.code)
      emit('change')
    }
  }
  onMounted(() => {
    selectValue.value = props.defaultValue
  })
</script>
<style lang="scss" scoped>
  .tag {
    width: 1200px;
    margin: 0 auto;
  }
</style>
